import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import './index.less';
import { Button, Card, Col, Image, Row, Space } from "antd";
import { Switch } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import _ from 'lodash';

export default function Example(props) {
    const { datas, jcdListDates, fxqh } = props;
    const [show, setShow] = useState(true);
    const handleClose = () => {
        setShow(false);
    }

    const [position, setPosition] = useState({ x: 400, y: 300 });
    const [isDragging, setIsDragging] = useState(false);
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

    const handleMouseDown = (e) => {
        setIsDragging(true);
        setMousePosition({ x: e.clientX, y: e.clientY });
    };

    const handleMouseMove = (e) => {
        if (!isDragging) return;

        const dx = e.clientX - mousePosition.x;
        const dy = e.clientY - mousePosition.y;

        setPosition({ x: position.x + dx, y: position.y + dy });
        setMousePosition({ x: e.clientX, y: e.clientY });
    };

    const handleMouseUp = () => {
        setIsDragging(false);
    };

    return <>
        {show && (

            <div className=' fill  example' style={{
                borderRadius: 12,
                backgroundColor: 'rgba(0,0,0,.7)',
                position: "absolute",
                left: position.x,
                top: position.y,
                zIndex: 3,
                paddingBottom: 12,
                ...props.style,

            }}
                onMouseDown={handleMouseDown}
                onMouseMove={handleMouseMove}
                onMouseUp={handleMouseUp}>
                <p className='layout-h' style={{
                    paddingLeft: 79,
                    fontSize: 16,
                }}>
                    <span onClick={e => {
                        //window.open('http://218.6.151.129:60080/ybyj/2023/10/23/2fc01b8c1e9d4f359fc421a884a85089.pdf','_blank')
                    }} className='tuli'>图例</span>
                    <Button size='small' icon={<CloseOutlined />} onClick={handleClose} style={{ marginLeft: 45 }}></Button>
                </p>
                <div className='layout-v fill' style={{
                    padding: "0 12px",

                }}>
                    {datas.map((data, i) => {
                        const checkedProps = {};
                        if (!_.isUndefined(data.checked)) {
                            checkedProps.checked = data.checked;
                        }
                        return <Row key={data.key || i} style={{
                            marginBottom: 10,
                        }} gutter={8}>
                            {data.iconPath && <Col>
                                <img src={data.iconPath} alt='' style={{
                                    height: 30,
                                    width: "auto",
                                    marginBottom: -5
                                }} />
                            </Col>}
                            <Col flex={1}>
                                <div>{data.name}</div>
                            </Col>
                            <Col> <div><Switch defaultChecked onChange={checked => {
                                props.onVisibleChange?.(checked, data.type, data)
                            }} /></div>
                            </Col>

                        </Row>
                    })}
                </div>
                {jcdListDates && <Card style={{
                    fontSize: 12,
                    textAlign: 'left',
                    background: 'rgba(255,255,255,0)',
                    border: 'none',
                }} className='Card-span'>
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        backgroundColor: 'red'
                    }}></span>红色预警&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        backgroundColor: 'orange'
                    }}></span>橙色预警<br />
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        backgroundColor: 'yellow'
                    }}></span>黄色预警&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        backgroundColor: 'blue'
                    }}></span>蓝色预警<br /><br />
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        //borderRadius: '50%',
                        //backgroundColor: 'blue'
                    }}></span>地图颜色<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(219,247, 211, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0-10<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(62,186, 57, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10-25<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(96,184, 249, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25-50<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(0,0, 255, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50-100<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(255,0, 255, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100-250<br />

                </Card>}
                {fxqh && <Card style={{
                    fontSize: 12,
                    textAlign: 'left',
                    background: 'rgba(255,255,255,0)',
                    border: 'none',
                }} className='Card-span'>
                    
                    <span style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        //borderRadius: '50%',
                        //backgroundColor: 'blue'
                    }}></span>地图颜色<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(56,101,240,0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;低风险<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(247,245,0,0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中风险<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(235,142,0,0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中-高风险<br />
                    <span style={{
                        display: 'inline-block',
                        width: 20,
                        height: 10,
                        //borderRadius: '50%',
                        backgroundColor: 'rgba(255,255, 0, 0.5)'
                    }}></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高风险<br />
                    

                </Card>}
            </div>
        )}
    </>
}